<template>
 <view class="content-navbar-box">
  <view class="content-navbar" :style="{backgroundImage: `url(${getImg('votion_form_headr_back_image.svg')})`}" >
    <u-navbar  
    :titleStyle ="{color: navTitleColor}"
     :leftIconColor="navTitleColor"  
       :bgColor="navColor"
       title="投票" 
       :placeholder="true" 
     
        :autoBack="true">
    </u-navbar>
      <view class="content-navbar-lable">关于是否同意续聘杭州爱你家物业有限公司的相关事宜</view>
      <view class="content-navbar-buttons">
        <view class="content-navbar-buttons-item" 
        @click="handleClick(item)"
        v-for="(item,index) in buttons" :key="index">
            <u-image :src="item.icon" width="62rpx" height="62rpx" style="margin-right: 10rpx;"></u-image>
            <text class="u-m-l-40" >{{item.name}}</text>
            <view class="content-navbar-buttons-item-icon">
                <u-icon v-if="item.isArrow" name="arrow-right" color="#B7C4D2" size="15"></u-icon>
            </view>
            
        </view>
      </view>
  </view>
</view>
</template>

<script>
import votion_form_headr_left_button from '@/static/votion_form_headr_left_button.svg'
import votion_form_headr_right_button from '@/static/votion_form_headr_right_button.svg'

export default {
  name: "Head",
  props: {
    scrollTop: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
        buttons:[
            {
                name:'投票说明',
                icon:votion_form_headr_left_button,
                isArrow:false
                
            },
            {
                name:"投票检验",
                icon:votion_form_headr_right_button,
                isArrow:true
            }
            
        ]
    }
  },
  computed: {
    navColor() {
      return this.scrollTop === 0 ? 'rgba(0,0,0,0)' : `rgba(255,255,255,${this.scrollTop/100})`
    },
    navTitleColor() {
      return this.scrollTop === 0 ? '#ffffff' : '#333333';
    }
  },
  methods:{
    handleClick(item){
   
      if(item.name=="投票说明"){
        
        uni.navigateTo({
          url:"/pages/votingIns/index"
        })
      }else if(item.name=="投票检验"){
        uni.navigateTo({
          url:`/pages/certificate/index?title=${item.name}&recordId=${this.recordId}`
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.content-navbar-box{
    width: 100%;
}
.content-navbar {
  width: 100%;
  padding: 0 30rpx 0rpx 30rpx;
  background-size: cover;
  height: 474rpx;

    &-lable{
       font-weight: 550;
        font-size: 36rpx;
        color: #FFFFFF; 
        margin:16rpx 0 30rpx 0;
        padding:0 4rpx
    }
    &-buttons{
        display: flex;
        justify-content: space-between;
        align-items: center;
        &-item{
            padding: 0 30rpx;
            width: 337rpx;
            height: 100rpx;
            background: linear-gradient( 360deg, #FFFFFF 0%, #E3F0FD 100%);
            box-shadow: inset 0rpx 2rpx 0rpx 0rpx #FFFFFF;
            border-radius: 18rpx;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-weight: 400;
            font-size: 30rpx;
            color: #333333;
            text-align: center;
            &-icon{
                margin-left: 5rpx;
                position: relative;
                top: 3rpx;
            }
        }
    }
  
}


</style>
